import React from 'react';
import store from '../redux';

const styles = {
    name:{
        width:'200px',  
        display:'inline-block',
          
    },
    delete:{
        fontSize:'18px',
        color:'white', 
        cursor:'pointer'      
    }
}

export default class NameList extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            nameVal:"1",
        }
        this.change = this.change.bind(this);
        this.submit = this.submit.bind(this);       
    }
    change(e){
        let nameVal = e.target.value;
        this.setState({
            nameVal
        })
    }
    submit(){
        store.dispatch({ type: "ADDNAME",value:this.state.nameVal })
        let nameVal = Math.ceil(Math.random()*100);
        this.setState({
            nameVal
        })
    }
    delete(index){
        store.dispatch({ type: "DELETENAME",value:index })
    }
    render(){
        return(
            <div style={{background:'red'}}>
                <h3>nameList component</h3>
                <input
                    value={this.state.nameVal}
                    onChange={this.change}
                />
                <button onClick={this.submit}>提交</button>
                <ol>
                    {
                        store.getState().nameList.map((item,index) => {
                            return <li key={index}>
                                <span style={styles.name}>{item}</span>
                                <span 
                                    style={styles.delete} 
                                    onClick={this.delete.bind(this,index)}>
                                    X
                                </span>
                            </li>
                        })
                    }
                </ol>
            </div>
        )
    }
}
